<template>
  <div class="prompt-template-list">
    <div class="component-header">
      <div class="header-actions">
        <el-select 
          v-model="filterCategory" 
          placeholder="按分类筛选" 
          clearable
          @change="loadTemplates"
        >
          <el-option label="系统提示词" value="system" />
          <el-option label="文章写作" value="article" />
          <el-option label="摘要生成" value="summary" />
          <el-option label="内容优化" value="optimization" />
          <el-option label="其他" value="other" />
        </el-select>
        <el-button type="primary" @click="showAddTemplateDialog">添加模板</el-button>
      </div>
    </div>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="5" animated />
    </div>
    
    <!-- 错误提示 -->
    <el-alert
      v-if="error"
      title="加载失败"
      type="error"
      :description="error"
      show-icon
      :closable="false"
      style="margin-bottom: 16px;"
    />
    
    <el-table v-else :data="templates" style="width: 100%">
      <el-table-column prop="name" label="模板名称" />
      <el-table-column prop="category" label="分类">
        <template #default="scope">
          <el-tag v-if="scope.row.category">{{ scope.row.category }}</el-tag>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述" show-overflow-tooltip />
      <el-table-column label="标签">
        <template #default="scope">
          <el-tag 
            v-for="tag in scope.row.tags" 
            :key="tag" 
            size="small" 
            style="margin-right: 5px;"
          >
            {{ tag }}
          </el-tag>
          <span v-if="!scope.row.tags || scope.row.tags.length === 0">-</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template #default="scope">
          <el-button-group>
            <el-button size="small" @click="editTemplate(scope.row)">编辑</el-button>
            <el-button size="small" type="primary" @click="useTemplate(scope.row)">使用</el-button>
            <el-button size="small" type="success" @click="testTemplate(scope.row)">测试</el-button>
            <el-button size="small" type="danger" @click="deleteTemplate(scope.row)">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 添加/编辑模板对话框 -->
    <el-dialog 
      :title="isEdit ? '编辑提示词模板' : '添加提示词模板'" 
      v-model="dialogVisible"
      width="800px"
    >
      <el-form :model="templateForm" label-width="120px" :rules="rules" ref="templateFormRef">
        <el-form-item label="模板名称" prop="name">
          <el-input v-model="templateForm.name" placeholder="给模板起个名字" />
        </el-form-item>
        
        <el-form-item label="分类" prop="category">
          <el-select v-model="templateForm.category" placeholder="选择模板分类" style="width: 100%">
            <el-option label="系统提示词" value="system" />
            <el-option label="文章写作" value="article" />
            <el-option label="摘要生成" value="summary" />
            <el-option label="内容优化" value="optimization" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="描述" prop="description">
          <el-input 
            v-model="templateForm.description" 
            type="textarea" 
            :rows="2" 
            placeholder="简要描述模板的用途"
          />
        </el-form-item>
        
        <el-form-item label="系统提示词" prop="system_prompt">
          <el-input 
            v-model="templateForm.system_prompt" 
            type="textarea" 
            :rows="4" 
            placeholder="系统提示词（可选）"
          />
          <div class="form-tip">
            系统提示词用于设置AI的行为和角色，例如："你是一位专业的文案撰写者"
          </div>
        </el-form-item>
        
        <el-form-item label="用户提示词" prop="user_prompt">
          <el-input 
            v-model="templateForm.user_prompt" 
            type="textarea" 
            :rows="6" 
            placeholder="输入提示词模板，使用 {变量名} 表示变量"
            @input="extractVariables"
          />
          <div class="form-tip">
            使用大括号 {变量名} 表示变量，例如：请写一篇关于 {topic} 的文章，风格为 {style}
          </div>
        </el-form-item>
        
        <el-form-item label="标签">
          <el-tag
            v-for="tag in templateForm.tags"
            :key="tag"
            closable
            @close="removeTag(tag)"
            style="margin-right: 10px; margin-bottom: 10px;"
          >
            {{ tag }}
          </el-tag>
          <el-input
            v-if="tagInputVisible"
            ref="tagInputRef"
            v-model="tagInputValue"
            class="tag-input"
            size="small"
            @keyup.enter="addTag"
            @blur="addTag"
          />
          <el-button v-else size="small" @click="showTagInput">+ 添加标签</el-button>
        </el-form-item>
        
        <el-form-item label="变量">
          <div v-if="templateForm.variables.length === 0" class="no-variables">
            尚未添加变量，点击下方按钮添加或在提示词中使用 {变量名} 格式自动添加
          </div>
          <div v-for="(variable, index) in templateForm.variables" :key="index" class="variable-item">
            <el-row :gutter="10">
              <el-col :span="6">
                <el-form-item :prop="`variables.${index}.name`" :rules="{ required: true, message: '变量名不能为空' }">
                  <el-input v-model="variable.name" placeholder="变量名" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :prop="`variables.${index}.description`">
                  <el-input v-model="variable.description" placeholder="变量描述" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :prop="`variables.${index}.default_value`">
                  <el-input v-model="variable.default_value" placeholder="默认值" />
                </el-form-item>
              </el-col>
              <el-col :span="2" class="variable-actions">
                <el-button type="danger" circle @click="removeVariable(index)" :icon="Delete" />
              </el-col>
            </el-row>
          </div>
          <div class="variable-actions">
            <el-button type="primary" @click="addVariable" plain>添加变量</el-button>
            <el-dropdown @command="addSpecialVariable">
              <el-button type="info" plain>
                添加特殊变量 <el-icon><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="_title">文章标题 (_title)</el-dropdown-item>
                  <el-dropdown-item command="_references">参考内容 (_references)</el-dropdown-item>
                  <el-dropdown-item command="_sample">用户样本 (_sample)</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-form-item>
        
        <!-- 在模板编辑对话框中添加特殊变量说明 -->
        <div class="special-variables-info">
          <h4>智能特殊变量：</h4>
          <ul>
            <li><code>{_title}</code> - 文章标题（来自用户输入的主题）</li>
            <li><code>{_references}</code> - 参考内容（来自用户提供的文章链接）</li>
            <li><code>{_sample}</code> - 用户样本（来自编辑器中的当前内容）</li>
          </ul>
          <p>特殊变量会自动从文章编辑器中获取值，无需用户手动输入。如果用户未提供相应内容，系统会智能地跳过该变量。</p>
        </div>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveTemplate" :loading="saving">
            {{ isEdit ? '保存修改' : '创建模板' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    
    <!-- 使用模板对话框 -->
    <el-dialog 
      title="使用提示词模板" 
      v-model="useDialogVisible"
      width="800px"
    >
      <div v-if="currentTemplate">
        <h3>{{ currentTemplate.name }}</h3>
        <p v-if="currentTemplate.description">{{ currentTemplate.description }}</p>
        
        <div v-if="currentTemplate.variables && currentTemplate.variables.length > 0">
          <h4>填写变量值</h4>
          <el-form label-width="120px">
            <el-form-item 
              v-for="variable in currentTemplate.variables" 
              :key="variable.name"
              :label="variable.description || variable.name"
            >
              <el-input 
                v-model="variableValues[variable.name]" 
                :placeholder="variable.default_value || '请输入值'"
              />
            </el-form-item>
          </el-form>
          
          <div class="dialog-footer">
            <el-button @click="previewTemplate" type="primary" :loading="processing">
              预览结果
            </el-button>
          </div>
        </div>
        
        <div v-else class="no-variables">
          此模板没有变量需要填写
          <div class="dialog-footer" style="margin-top: 10px;">
            <el-button @click="previewTemplate" type="primary" :loading="processing">
              预览结果
            </el-button>
          </div>
        </div>
        
        <div v-if="processedTemplate" class="preview-result">
          <div v-if="processedTemplate.system_prompt" class="preview-section">
            <h4>系统提示词:</h4>
            <pre>{{ processedTemplate.system_prompt }}</pre>
          </div>
          
          <div class="preview-section">
            <h4>用户提示词:</h4>
            <pre>{{ processedTemplate.user_prompt }}</pre>
          </div>
          
          <div class="preview-actions">
            <el-button @click="copyToClipboard" type="info">
              复制到剪贴板
            </el-button>
            <el-button @click="applyTemplate" type="primary">
              应用到对话
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    
    <!-- 测试对话框 -->
    <el-dialog
      title="测试提示词模板"
      v-model="testDialogVisible"
      width="800px"
    >
      <div v-if="currentTestTemplate">
        <h3>{{ currentTestTemplate.name }}</h3>
        <p v-if="currentTestTemplate.description">{{ currentTestTemplate.description }}</p>
        
        <!-- 选择 AI 模型 -->
        <el-form label-width="120px">
          <el-form-item label="选择 AI 模型">
            <el-select v-model="testModelId" placeholder="选择 AI 模型" style="width: 100%">
              <el-option
                v-for="model in aiModels"
                :key="model.id"
                :label="model.name"
                :value="model.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        
        <!-- 变量表单 -->
        <div v-if="currentTestTemplate.variables && currentTestTemplate.variables.length > 0">
          <h4>填写变量</h4>
          <el-form label-width="120px">
            <el-form-item
              v-for="variable in currentTestTemplate.variables"
              :key="variable.name"
              :label="variable.description || variable.name"
              :required="variable.required"
            >
              <el-input
                v-model="testVariables[variable.name]"
                :placeholder="variable.default_value || ''"
                :type="variable.name.includes('content') ? 'textarea' : 'text'"
                :rows="variable.name.includes('content') ? 4 : 1"
                @input="updateProcessedTemplate"
              />
            </el-form-item>
          </el-form>
        </div>
        
        <!-- 处理后的提示词 -->
        <div class="preview-section">
          <h4>处理后的提示词</h4>
          <div v-if="processedTemplate && processedTemplate.system_prompt">
            <h5>系统提示词</h5>
            <pre>{{ processedTemplate.system_prompt }}</pre>
          </div>
          <div v-if="processedTemplate">
            <h5>用户提示词</h5>
            <pre>{{ processedTemplate.user_prompt }}</pre>
          </div>
          <div v-else class="placeholder-text">
            填写变量后将显示处理后的提示词
          </div>
        </div>
        
        <!-- AI 响应 -->
        <div v-if="testResult" class="test-result">
          <h4>AI 响应</h4>
          <div v-if="testLoading" class="loading-container">
            <el-skeleton :rows="5" animated />
          </div>
          <pre v-else>{{ testResult }}</pre>
        </div>
        
        <!-- 操作按钮 -->
        <div class="dialog-footer">
          <el-button @click="testDialogVisible = false">关闭</el-button>
          <el-button type="success" @click="runTest" :loading="testLoading" :disabled="!testModelId">
            运行测试
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { fetchPromptTemplates, fetchPromptTemplate, createPromptTemplate, updatePromptTemplate, deletePromptTemplate, processPromptTemplate, testPromptTemplate } from '../api/prompt_template'
import { fetchAIModels } from '../api/ai_model'
import { Delete, Plus, ArrowDown } from '@element-plus/icons-vue'

// 模板列表
const templates = ref([])
const loading = ref(false)
const error = ref('')
const filterCategory = ref('')

// 对话框控制
const dialogVisible = ref(false)
const useDialogVisible = ref(false)
const isEdit = ref(false)
const saving = ref(false)

// 表单引用
const templateFormRef = ref(null)

// 模板表单
const templateForm = reactive({
  id: '',
  name: '',
  description: '',
  system_prompt: '',
  user_prompt: '',
  variables: [],
  category: '',
  tags: []
})

// 表单验证规则
const rules = {
  name: [
    { required: true, message: '请输入模板名称', trigger: 'blur' }
  ],
  user_prompt: [
    { required: true, message: '请输入用户提示词', trigger: 'blur' }
  ],
  category: [
    { required: true, message: '请选择模板分类', trigger: 'change' }
  ]
}

// 标签输入
const tagInputVisible = ref(false)
const tagInputValue = ref('')
const tagInputRef = ref(null)

// 使用模板
const currentTemplate = ref(null)
const variableValues = ref({})
const processedTemplate = ref(null)
const processing = ref(false)

// AI 模型列表
const aiModels = ref([])
const testModelId = ref('')
const testVariables = reactive({})
const testDialogVisible = ref(false)
const currentTestTemplate = ref(null)
const testResult = ref('')
const testLoading = ref(false)

// 加载模板列表
const loadTemplates = async () => {
  loading.value = true
  error.value = ''
  
  try {
    templates.value = await fetchPromptTemplates(filterCategory.value)
  } catch (err) {
    console.error('加载提示词模板失败', err)
    error.value = '加载提示词模板失败: ' + (err.response?.data?.detail || err.message)
  } finally {
    loading.value = false
  }
}

// 显示添加模板对话框
const showAddTemplateDialog = () => {
  isEdit.value = false
  resetForm()
  dialogVisible.value = true
}

// 编辑模板
const editTemplate = async (template) => {
  isEdit.value = true
  templateForm.id = template.id
  
  // 复制模板数据到表单
  Object.assign(templateForm, {
    name: template.name,
    description: template.description || '',
    system_prompt: template.system_prompt || '',
    user_prompt: template.user_prompt,
    variables: JSON.parse(JSON.stringify(template.variables || [])).map(v => ({
      ...v,
      auto_extracted: false  // 初始化时标记为非自动提取
    })),
    category: template.category || '',
    tags: [...(template.tags || [])]
  })
  
  // 标记自动提取的变量
  extractVariables()
  
  dialogVisible.value = true
}

// 保存模板
const saveTemplate = async () => {
  if (!templateFormRef.value) return
  
  await templateFormRef.value.validate(async (valid) => {
    if (!valid) return
    
    saving.value = true
    
    try {
      const templateData = {
        name: templateForm.name,
        description: templateForm.description,
        system_prompt: templateForm.system_prompt,
        user_prompt: templateForm.user_prompt,
        variables: templateForm.variables,
        category: templateForm.category,
        tags: templateForm.tags
      }
      
      if (isEdit.value) {
        await updatePromptTemplate(templateForm.id, templateData)
        ElMessage.success('模板更新成功')
      } else {
        await createPromptTemplate(templateData)
        ElMessage.success('模板创建成功')
      }
      
      dialogVisible.value = false
      loadTemplates()
    } catch (error) {
      console.error('保存模板失败', error)
      ElMessage.error('保存模板失败: ' + (error.response?.data?.detail || error.message))
    } finally {
      saving.value = false
    }
  })
}

// 删除模板
const deleteTemplate = async (template) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除模板 "${template.name}" 吗？此操作不可恢复。`,
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    await deletePromptTemplate(template.id)
    ElMessage.success('模板已删除')
    loadTemplates()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除模板失败', error)
      ElMessage.error('删除模板失败')
    }
  }
}

// 使用模板
const useTemplate = async (template) => {
  currentTemplate.value = template
  processedTemplate.value = null
  
  // 初始化变量值
  variableValues.value = {}
  if (template.variables && template.variables.length) {
    template.variables.forEach(variable => {
      variableValues.value[variable.name] = variable.default_value || ''
    })
  }
  
  useDialogVisible.value = true
}

// 预览模板
const previewTemplate = async () => {
  if (!currentTemplate.value) return
  
  processing.value = true
  
  try {
    processedTemplate.value = await processPromptTemplate(
      currentTemplate.value.id, 
      variableValues.value
    )
  } catch (err) {
    console.error('处理模板失败', err)
    ElMessage.error('处理模板失败: ' + (err.response?.data?.detail || err.message))
  } finally {
    processing.value = false
  }
}

// 应用模板到对话
const applyTemplate = () => {
  if (!processedTemplate.value) return
  
  // 这里可以发送事件或调用父组件方法，将处理后的提示词应用到对话
  // 例如：emit('apply-template', processedTemplate.value)
  
  ElMessage.success('提示词已应用到对话')
  useDialogVisible.value = false
}

// 复制到剪贴板
const copyToClipboard = () => {
  if (!processedTemplate.value) return
  
  const text = [
    processedTemplate.value.system_prompt ? `系统提示词:\n${processedTemplate.value.system_prompt}\n` : '',
    `用户提示词:\n${processedTemplate.value.user_prompt}`
  ].filter(Boolean).join('\n\n')
  
  navigator.clipboard.writeText(text)
    .then(() => ElMessage.success('已复制到剪贴板'))
    .catch(() => ElMessage.error('复制失败'))
}

// 重置表单
const resetForm = () => {
  if (templateFormRef.value) {
    templateFormRef.value.resetFields()
  }
  
  Object.assign(templateForm, {
    id: '',
    name: '',
    description: '',
    system_prompt: '',
    user_prompt: '',
    variables: [],
    category: '',
    tags: []
  })
}

// 从提示词中提取变量
const extractVariables = () => {
  if (!templateForm.user_prompt) return
  
  // 使用正则表达式提取 {变量名} 格式的变量
  const regex = /{([^{}]+)}/g
  const matches = templateForm.user_prompt.matchAll(regex)
  
  // 提取所有变量名
  const extractedVars = new Set()
  for (const match of matches) {
    extractedVars.add(match[1])
  }
  
  // 获取当前已有的变量名
  const existingVars = new Set(templateForm.variables.map(v => v.name))
  
  // 添加新提取的变量
  for (const varName of extractedVars) {
    if (!existingVars.has(varName)) {
      templateForm.variables.push({
        name: varName,
        description: `${varName} 的值`,
        default_value: '',
        required: true,
        auto_extracted: true  // 标记为自动提取的变量
      })
      existingVars.add(varName)
    }
  }
  
  // 移除不再使用的自动提取变量
  templateForm.variables = templateForm.variables.filter(v => {
    // 保留手动添加的变量或仍在使用的自动提取变量
    return !v.auto_extracted || extractedVars.has(v.name)
  })
}

// 添加变量
const addVariable = () => {
  templateForm.variables.push({
    name: '',
    description: '',
    default_value: '',
    required: true,
    auto_extracted: false  // 标记为手动添加的变量
  })
}

// 删除变量
const removeVariable = (index) => {
  templateForm.variables.splice(index, 1)
}

// 显示标签输入框
const showTagInput = async () => {
  tagInputVisible.value = true
  tagInputValue.value = ''
  await nextTick()
  tagInputRef.value.focus()
}

// 添加标签
const addTag = () => {
  if (tagInputValue.value) {
    if (!templateForm.tags.includes(tagInputValue.value)) {
      templateForm.tags.push(tagInputValue.value)
    }
  }
  tagInputVisible.value = false
}

// 删除标签
const removeTag = (tag) => {
  templateForm.tags = templateForm.tags.filter(t => t !== tag)
}

// 加载 AI 模型
const loadAIModels = async () => {
  try {
    const models = await fetchAIModels()
    aiModels.value = models.filter(model => model.is_active)
    if (aiModels.value.length > 0) {
      testModelId.value = aiModels.value[0].id
    }
  } catch (error) {
    console.error('加载 AI 模型失败', error)
    ElMessage.error('加载 AI 模型失败: ' + error.message)
  }
}

// 实时更新处理后的提示词
const updateProcessedTemplate = async () => {
  if (!currentTestTemplate.value) return;
  
  try {
    // 使用本地处理逻辑，避免频繁的API调用
    const template = currentTestTemplate.value;
    const systemPrompt = template.system_prompt || "";
    const userPrompt = template.user_prompt;
    
    // 替换变量
    let processedSystemPrompt = systemPrompt;
    let processedUserPrompt = userPrompt;
    
    for (const variable of template.variables) {
      const varName = variable.name;
      const placeholder = `{${varName}}`;
      
      // 获取变量值，如果没有提供则使用默认值
      const value = testVariables[varName] || variable.default_value || '';
      
      // 替换系统提示词和用户提示词中的变量
      processedSystemPrompt = processedSystemPrompt.replace(new RegExp(placeholder, 'g'), value);
      processedUserPrompt = processedUserPrompt.replace(new RegExp(placeholder, 'g'), value);
    }
    
    processedTemplate.value = {
      system_prompt: processedSystemPrompt,
      user_prompt: processedUserPrompt
    };
  } catch (error) {
    console.error('处理提示词失败', error);
  }
};

// 修改 showTestDialog 方法，添加初始化处理后的提示词
const showTestDialog = async (template) => {
  currentTestTemplate.value = template;
  testDialogVisible.value = true;
  processedTemplate.value = null;
  testResult.value = '';
  
  // 重置变量
  Object.keys(testVariables).forEach(key => delete testVariables[key]);
  
  // 设置默认值
  if (template.variables) {
    template.variables.forEach(variable => {
      if (variable.default_value) {
        testVariables[variable.name] = variable.default_value;
      }
    });
  }
  
  // 加载 AI 模型
  if (aiModels.value.length === 0) {
    await loadAIModels();
  }
  
  // 初始化处理后的提示词
  await updateProcessedTemplate();
};

// 修改 runTest 方法，直接使用当前处理后的提示词
const runTest = async () => {
  if (!testModelId.value) {
    ElMessage.warning('请选择 AI 模型');
    return;
  }
  
  try {
    testLoading.value = true;
    testResult.value = '';
    
    // 确保已经处理了提示词
    if (!processedTemplate.value) {
      await updateProcessedTemplate();
    }
    
    // 测试模板
    const result = await testPromptTemplate(
      currentTestTemplate.value.id,
      testModelId.value,
      testVariables
    );
    
    testResult.value = result.ai_response;
  } catch (error) {
    console.error('测试提示词失败', error);
    ElMessage.error('测试提示词失败: ' + error.message);
  } finally {
    testLoading.value = false;
  }
};

// 在表格操作中添加测试按钮
const testTemplate = (template) => {
  showTestDialog(template)
}

// 添加特殊变量
const addSpecialVariable = (command) => {
  let description = ''
  let defaultValue = ''
  
  switch (command) {
    case '_title':
      description = '文章标题（智能变量）'
      defaultValue = '用户输入的主题'
      break
    case '_references':
      description = '参考内容（智能变量）'
      defaultValue = '用户提供的参考链接内容'
      break
    case '_sample':
      description = '用户样本（智能变量）'
      defaultValue = '编辑器中的当前内容'
      break
  }
  
  templateForm.variables.push({
    name: command,
    description,
    default_value: defaultValue
  })
}

onMounted(() => {
  loadTemplates()
})
</script>

<style scoped>
.prompt-template-list {
  width: 100%;
}

.component-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.header-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.variable-item {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
}

.tag-input {
  width: 100px;
  margin-right: 10px;
  vertical-align: bottom;
}

.preview-result {
  margin-top: 20px;
}

.preview-section {
  margin-bottom: 20px;
}

.preview-section h4 {
  margin-top: 0;
  margin-bottom: 8px;
  color: #303133;
}

.preview-section pre {
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 12px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.preview-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.no-variables {
  text-align: center;
  padding: 20px;
  color: #909399;
}

.loading-container {
  padding: 20px;
}

.test-result {
  margin-top: 20px;
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 16px;
}

.test-result pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.dialog-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.placeholder-text {
  color: #909399;
  font-style: italic;
  padding: 10px;
  background-color: #f5f7fa;
  border: 1px dashed #e4e7ed;
  border-radius: 4px;
}

.variable-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.special-variables-info {
  margin-top: 20px;
  padding: 16px;
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.special-variables-info h4 {
  margin-top: 0;
  margin-bottom: 8px;
  color: #303133;
}

.special-variables-info ul {
  margin-bottom: 8px;
}

.special-variables-info li {
  margin-bottom: 4px;
}

.special-variables-info p {
  margin: 0;
  color: #909399;
}
</style> 